<template>
  <div class="router-wrap">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component v-if="keepAlive" :is="Component" :key="path" />
      </keep-alive>
      <component v-if="!keepAlive" :is="Component" :key="path" />
    </router-view>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      loading: false,
      isPopstate: false,
      transitionName: 'fade',
    };
  },
  computed: {
    fullPath() {
      return this.$route.fullPath;
    },
    path() {
      return this.$route.path;
    },
    keepAlive() {
      return (this.$route.meta || {}).keepAlive;
    },
  },
  methods: {},
  mounted() {
    // 解决ios不支持按钮:active伪类的方法
    document.body.addEventListener('touchstart', () => {});
    // 解决ios输入表单被键盘顶上后无法恢复的问题
    let oldScrollTop = 0;
    document.addEventListener(
      'focus',
      () => {
        oldScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      },
      true
    );
    document.addEventListener(
      'blur',
      () => {
        if (window.scrollTo) {
          window.scrollTo(0, oldScrollTop);
        }
      },
      true
    );
    // 地址栏回退(前进也执行，无法判断)
    window.addEventListener('popstate', () => {
      this.isPopstate = true;
    });
    // this.$nextTick(() => {
    //   if (window.scrollTo) {
    //     const scrollTop = document.documentElement.scrollTop + 5;
    //     window.scrollTo(0, document.documentElement.scrollHeight);
    //     window.scrollTo(0, scrollTop);
    //   }
    // });
  },
  watch: {
    $route: {
      deep: true,
      handler(newValue) {
        // 路由切换效果(刷新浏览器是不使用)
        if (this.loading) {
          this.transitionName = this.isPopstate ? 'slide-router-right' : 'slide-router-left';
        }
        this.loading = true;
        this.isPopstate = false;

        // 滚动条自动滚动5px，然后回位(避免ios回退偶现白屏)
        const meta = newValue.meta || {};
        console.log(meta);
        this.$nextTick(() => {
          if (window.scrollTo) {
            const scrollTop = document.documentElement.scrollTop + 5;
            window.scrollTo(0, document.documentElement.scrollHeight);
            window.scrollTo(0, scrollTop);
          }
        });
      },
    },
  },
};
</script>

<style lang="scss">
@import './styles/common.scss';

#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}
.router-wrap {
  width: 100%;
  height: 100%;
}
// 前进
.slide-router-left {
}
.slide-router-left-enter-active,
.slide-router-left-leave-active {
  transition-property: transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
}
.slide-router-left-enter {
  transform: translate(100%, 0%);
  opacity: 0;
}
.slide-router-left-leave-to {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate(-100%, 0);
  opacity: 0;
}
// 后退
.slide-router-right {
}
.slide-router-right-enter-active,
.slide-router-right-leave-active {
  transition-property: transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: ease-in;
}
.slide-router-right-enter {
  transform: translate(-100%, 0%);
  opacity: 0;
}
.slide-router-right-leave-to {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate(100%, 0);
  opacity: 0;
}
</style>
